<template>
  <!--用户管理页面-->
  <div>
    <UserQuery @search="queryTable" ref="query"/>
    <br/>
    <div class="btnGroup">
      <a-button icon="plus-circle" @click="addUser()">
        新增
      </a-button>
    </div>
    <a-table
      size="small"
      :bordered="true"
      :columns="columns"
      :dataSource="data"
      :rowKey="`id`"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!--状态-->
      <template slot="state" slot-scope="state">
        <template v-if="state===0">禁用</template>
        <template v-else-if="state===1">启用</template>
        <template v-else-if="state===2">锁定</template>
      </template>
      <!--性别-->
      <template slot="gender" slot-scope="gender">
        <template>{{ gender===0 ? '女':'男' }}</template>
      </template>

      <div slot="action" slot-scope="text ">
        <template v-if="text.username!=='admin'">
          <a href="javascript:;" @click="updateUser(text)"><a-icon type="edit"/> 修改</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="resetPassword(text)"><a-icon type="redo" /> 密码重置</a>
        </template>
      </div>
    </a-table>
    <UserModalModify @refresh="queryTable" ref="modify"/>
    <UserModalResetPassword ref="reset"/>
  </div>
</template>

<script>
import api from './system'
import { antOrderConvert, antPaginationConvert } from '@/utils/antUtil'
import UserQuery from './components/UserQuery'
import UserModalModify from './modal/UserModalModify'
import UserModalResetPassword from './modal/UserModalResetPassword'

const columns = [
  { title: '用户名', align: 'center', sorter: true, dataIndex: 'username', key: 'u.username' },
  { title: '昵称', align: 'center', sorter: true, dataIndex: 'nickname', key: 'u.nickname' },
  { title: '手机号码', align: 'center', sorter: true, dataIndex: 'phone', key: 'u.phone' },
  {
    title: '性别',
    align: 'center',
    sorter: true,
    dataIndex: 'gender',
    key: 'u.gender',
    scopedSlots: { customRender: 'gender' }
  },
  {
    title: '状态',
    align: 'center',
    sorter: true,
    dataIndex: 'state',
    key: 'u.state',
    scopedSlots: { customRender: 'state' }
  },
  { title: '企业', align: 'center', sorter: true, dataIndex: 'departmentName', key: 'd.name' },
  { title: '角色', align: 'center', sorter: true, dataIndex: 'roleName', key: 'r.name' },
  { title: '详情', align: 'center', key: 'action', scopedSlots: { customRender: 'action' } }
]

// 用户管理页面
export default {
  name: 'UserPage',
  components: { UserModalResetPassword, UserModalModify, UserQuery },
  data () {
    return {
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        total: 0,
        showTotal: function (total, range) {
          return ` ${range[0]}-${range[1]} of ${total} 条 `
        }
      },
      sorter: {},
      loading: false
    }
  },
  mounted () {
    this.queryTable()
  },
  methods: {
    // 分页、排序、筛选变化时触发 的方法
    handleTableChange (pagination, filters, sorter) {
      this.sorter = sorter
      this.pagination = pagination
      this.queryTable()
    },
    // 请求后台-获取用户列表
    queryTable () {
      // 查询组装数据 表单条件、分页对象、排序等
      const vs = this.$refs.query.getFormValue()
      const orderConvert = antOrderConvert(this.sorter, 'columnKey')
      const paginationConvert = antPaginationConvert(this.pagination)
      // 请求参数格式化
      const params = {
        ...vs,
        ...orderConvert,
        ...paginationConvert
      }
      // 请求后台数据
      this.loading = true
      this.axios.post(api.user.getPageList, params)
        .then((response) => {
          this.data = response.data.records
          this.pagination.total = parseInt(response.data.total)
        })
        .catch((error) => {
          console.log('获取用户列表请求异常了', error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 新增用户
    addUser () {
      this.$refs.modify.showModal()
    },
    // 修改用户
    updateUser (text) {
      this.$refs.modify.showModal(text)
    },
    // 重置密码
    resetPassword (text) {
      this.$refs.reset.showModal(text)
    }
  }
}
</script>
